<template>
  <div class="comment-item">
    <div class="comment-main" @click="showReplyBox">
      <!-- <a-avatar :src="comment.author.avatar" :alt="comment.author.name" /> -->
       <UserAvatarCard
        :avatar="comment.author.avatar"
        :username="comment.author.name"
        :email="comment.author.email"
        />
      <div class="comment-content">
        <div class="comment-header">
          <span class="comment-author">{{ comment.author.name }}</span>
          <span class="comment-time">{{ comment.time }}</span>
        </div>
        <div class="comment-text">{{ comment.content }}</div>
        <div class="comment-actions">
          <a v-if="comment.comment_total > 0" @click.stop="toggleExpand">
            {{ expanded ? '收起评论' : `展开评论(${comment.comment_total})` }}
          </a>
        </div>
      </div>
    </div>
    <div v-if="showReplyInput" class="reply-input">
      <a-textarea 
        ref="replyTextarea"
        v-model:value="replyContent" 
        placeholder="输入回复内容..." 
        :rows="2"
        @blur="handleBlur"
      />
      <div class="reply-btns">
        <a-button type="primary" size="small" @click.stop="handleSubmitReply">回复</a-button>
        <a-button size="small" style="margin-left: 8px;" @click.stop="cancelReply">取消</a-button>
      </div>
    </div>
    <div v-if="expanded" class="comment-children">
      <slot />
      <a v-if="canLoadMore" 
         @click.stop="loadMoreChildren" 
         class="load-more-link">
        显示更多评论
      </a>
    </div>
  </div>
</template>

<script>
import UserAvatarCard from '@/components/UserAvatarCard.vue'
export default {
  name: 'CommentItem',
  components:{
    UserAvatarCard
  },
  props: {
    comment: { type: Object, required: true },
    fetchSubComments: { type: Function, required: true }
  },
  data() {
    return {
      showReplyInput: false,
      replyContent: '',
      expanded: false,
      loading: false,
      isButtonClicked: false
    }
  },
  computed: {
    canLoadMore() {
      return (
        (this.comment.childrenLoaded || 0) < (this.comment.comment_total || 0) &&
        !this.loading
      )
    }
  },
  methods: {
    showReplyBox(event) {
      if (event.target.closest('.comment-actions') || 
          event.target.closest('.reply-btns') ||
          event.target.closest('.load-more-link')) {
        return
      }
      this.showReplyInput = true
      this.$nextTick(() => {
        const textarea = this.$refs.replyTextarea
        if (textarea) {
          textarea.focus()
        }
      })
    },
    handleBlur() {
      setTimeout(() => {
        if (!this.isButtonClicked) {
          this.showReplyInput = false
          this.replyContent = ''
        }
        this.isButtonClicked = false
      }, 200)
    },
    handleSubmitReply() {
      this.isButtonClicked = true
      if (!this.replyContent.trim()) {
        this.$message.error('回复内容不能为空')
        return
      }
      this.$emit('submit-reply', { 
        comment: this.comment, 
        content: this.replyContent 
      })
      this.replyContent = ''
      this.showReplyInput = false
      this.expanded = true
    },
    cancelReply() {
      this.isButtonClicked = true
      this.replyContent = ''
      this.showReplyInput = false
    },
    async toggleExpand() {
      this.expanded = !this.expanded
      if (this.expanded && (!this.comment.children || !this.comment.children.length)) {
        await this.loadMoreChildren(true)
      }
    },
    async loadMoreChildren(isFirst = false) {
      if (this.loading) return
      this.loading = true
      const page = isFirst ? 1 : (this.comment.childrenPage || 1) + 1
      const { list, total } = await this.fetchSubComments(this.comment.id, page)
      if (isFirst) {
        this.comment.children = list
      } else {
        this.comment.children = [...(this.comment.children || []), ...list]
      }
      this.comment.childrenPage = page
      this.comment.childrenLoaded = this.comment.children.length
      this.comment.childrenTotal = total
      this.loading = false
    }
  }
}
</script>

<style scoped>
.comment-item {
  margin-bottom: 16px;
  padding-left: 0;
}
.comment-main {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
}
.comment-content {
  margin-left: 12px;
  flex: 1;
}
.comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.comment-author {
  font-weight: bold;
}
.comment-time {
  color: #999;
  font-size: 12px;
}
.comment-text {
  margin: 4px 0 0 0;
  color: #333;
}
.comment-actions {
  margin-top: 4px;
}
.reply-input {
  margin: 8px 0 0 48px;
}
.reply-btns {
  margin-top: 4px;
}
.comment-children {
  margin-left: 40px;
  margin-top: 12px;
}
.load-more-link {
  display: block;
  margin-top: 8px;
  color: #1890ff;
  cursor: pointer;
}
.load-more-link:hover {
  color: #40a9ff;
}
</style>